/** * Create by mzq * Description: EditManagement * Date: 2025/2/11 13:12 *
Update: 2025/2/11 13:12 */

<template>
  <view class="account-management">
    <MyDiaLog
      :z-index="100000"
      :visible="visible"
      :titleName="'修改信息'"
      width="400px"
      @close="handleClose">
      <template>
        <div class="password-form">
          <div class="form-item">
            <div class="label">请设置新密码：</div>
            <div class="input-wrapper">
              <input
                type="password"
                v-model="newPassword"
                class="input"
                placeholder="请输入新密码" />
            </div>
          </div>
          <div class="form-item">
            <div class="label">请确认新密码：</div>
            <div class="input-wrapper">
              <input
                type="password"
                v-model="confirmPassword"
                class="input"
                placeholder="请再次输入新密码" />
            </div>
          </div>
          <div class="buttons">
            <div>
              <fui-button
                :bold="true"
                @click="handleClose"
                radius="5rpx"
                background="#E9E9E9"
                color="#000000"
                width="80px"
                >取消
              </fui-button>
            </div>
            <div style="margin-left: 10px">
              <fui-button
                :bold="true"
                @click="submitBtn"
                radius="5rpx"
                width="80px"
                background="#6DF7BE"
                color="#000000"
                >确定
              </fui-button>
            </div>
          </div>
        </div>
      </template>
    </MyDiaLog>
  </view>
</template>

<script>
import MyDiaLog from '@/components/MyDiaLog/MyDiaLog.vue'
import FuiButton from '@/components/firstui/fui-button/fui-button.vue'
import { readJsonFromFile, updateJsonById } from '@/utils/fileUtil'

export default {
  name: 'EditManagement',
  components: { FuiButton, MyDiaLog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    userData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      newPassword: '',
      confirmPassword: '',
    }
  },
  methods: {
    handleClose() {
      this.newPassword = ''
      this.confirmPassword = ''
      this.$emit('close')
    },
    submitBtn() {
      if (!this.newPassword || !this.confirmPassword) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      
      // 验证密码格式：6-20个字符，仅支持数字、下划线、大小写英文字母
      const passwordRegex = /^[a-zA-Z0-9_]{6,20}$/
      if (!passwordRegex.test(this.newPassword)) {
        uni.showToast({
          title: '密码长度为6-20个字符，仅支持数字、下划线、大小写英文字母',
          icon: 'none'
        })
        return
      }
      
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }

      // 验证通过，调用修改密码API
      this.updatePassword(this.newPassword)
    },
    async updatePassword(password) {
      try {
        // TODO: 调用修改密码API
        console.log('修改密码', password, this.userData)

        // 读取文件
        let res2 = readJsonFromFile('/sdcard/test/user.json')
        console.log(res2)
        const success = updateJsonById(
          this.userData.id,
          {
            password: password
          },
          "/sdcard/test/user.json"
        );
        
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
        this.handleClose()
        this.$emit('success')
      } catch (error) {
        uni.showToast({
          title: '修改失败',
          icon: 'error'
        })
      }
    }
  },
}
</script>

<style scoped lang="scss">
.password-form {
  padding: 20px;
  width: 400px;

  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .label {
      width: 120px;
      text-align: right;
      padding-right: 10px;
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }

    .input-wrapper {
      flex: 1;
      max-width: 200px;

      .input {
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        &:focus {
          border-color: #409eff;
          outline: none;
        }
      }
    }
  }

  .buttons {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐按钮 */
    margin-top: 20px; /* 根据需要添加顶部外边距 */
  }
}
</style>
